// 文章分类列表

<template>
  <div class="type-content" v-loading="isLoading">
    <h2>文章分类</h2>
    <LabelList :list="list" @select="handleClick" />
  </div>
</template>

<script>
import featchData from "@/mixins/fetchData.js";
import { getBlogType } from "@/api/blog.js";
import LabelList from "../LabelList";
export default {
  mixins: [featchData([])],
  components: {
    LabelList,
  },
  methods: {
    // 请求数据
    async fetchData() {
      let data = await getBlogType();
      return data;
    },
    handleClick(item) {
      // 跳转的路由，与当前路由一致，不进行跳转
      if (item.id == this.$route.params.cateId) {
        return;
      }

      // 跳转的 id 为 -1，跳转到首页
      if (item.id == -1) {
        this.$router.push({
          name: "Blog",
        });
      } else {
        // 跳转 id 正常，则进行正常跳转
        this.$router.push({
          name: "BlogType",
          params: {
            cateId: item.id,
          },
        });
      }
    },
  },
  computed: {
    // 处理从服务器获取的数据
    list() {
      let id = +this.$route.params.cateId || -1;
      let count = this.data.reduce((a, b) => {
        return a + b.articleCount;
      }, 0);

      // 获取文章总数
      let arr = [
        {
          name: "文章总数",
          id: -1,
          articleCount: count,
        },
        ...this.data,
      ];

      // 激活当前点击的分类文章
      arr = arr.map((item) => {
        return {
          isSelect: item.id === id,
          ...item,
        };
      });
      return arr;
    },
  },
};
</script>

<style lang="less" scoped>
.type-content {
  position: relative;
  padding: 15px 30px;
  height: 100%;
  width: 150px;

  h2 {
    font-size: 1em;
  }
}
</style>